import { Component } from '@angular/core';
import { CardComponent } from './card/card.component';
import { CounterComponent } from './counter.component';
import { BtnTemplateDirective } from './btn-template.directive';
import { ListComponent } from './list/list.component';
import { NgIf } from '@angular/common';

export interface Item {
  name: string;
  description: string;
  liked: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  styles: [
    `
      main {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    `,
  ],
  imports: [
    CardComponent,
    CounterComponent,
    BtnTemplateDirective,
    ListComponent,
    NgIf,
  ],
})
export class AppComponent {
  title = 'ng-content-demo';

  items: Item[] = [
    {
      name: 'apple',
      description: 'A delicious apple',
      liked: false,
    },
    {
      name: 'boy',
      description: 'A kid in raincoat',
      liked: false,
    },
    {
      name: 'cat',
      description: 'A handsome cat',
      liked: false,
    },
    {
      name: 'dog',
      description: 'A cute golden fetcher',
      liked: false,
    },
  ];

  likeItem(name: string) {
    console.log(`Item ${name} liked!!`);
    const item = this.items.find((i) => i.name === name);
    if (item) {
      item.liked = !item.liked;
    }
  }
}
